<template>
  <div :class="className" :style="{height:height,width:width}" >

    <div >

      <div style="font-size: 12px;color: #078ac7;">资源规划</div>

      <div style="font-size: 12px;color: #696969;margin-top: 15px">航班维度(统计提取转盘、登机口使用率%)</div>

      <div style="display:flex;gap:10px;margin-top: 30px">
        <div style="font-size:12px;margin-top: 3px">A转盘</div>
        <div style="width:80%;margin-left: 12px">
          <el-progress :text-inside="true" :stroke-width="22" :percentage="aDjkUsageRate">
          </el-progress>
        </div>
      </div>

      <div style="display:flex;gap:10px;margin-top: 35px">
        <div style="font-size:12px;margin-top: 3px">B转盘</div>
        <div style="width:80%;margin-left: 12px">
          <el-progress :text-inside="true" :stroke-width="22" :percentage="bDjkUsageRate" status="success">
          </el-progress>
        </div>
      </div>

      <div style="display:flex;gap:10px;margin-top: 35px">
        <div style="font-size:12px;margin-top: 3px">A登机口</div>
        <div style="width:80%">
          <el-progress :text-inside="true" :stroke-width="22" :percentage="aTqzpUsageRate" status="warning">
          </el-progress>
        </div>
      </div>

      <div style="display:flex;gap:10px;margin-top: 35px">
        <div style="font-size:12px;margin-top: 3px">B登机口</div>
        <div style="width:80%">
          <el-progress :text-inside="true" :stroke-width="22" :percentage="bTqzpUsageRate" status="exception">
          </el-progress>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import resize from './mixins/resize'
import { statisticsResourcePlanning } from '../../api/homePage/home'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      aDjkUsageRate:0,
      bDjkUsageRate:0,
      aTqzpUsageRate:0,
      bTqzpUsageRate:0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initResource();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {

    initResource(){
      statisticsResourcePlanning().then(response => {
        this.aDjkUsageRate = Number(response.data.adjkUsageRate);
        this.bDjkUsageRate = Number(response.data.bdjkUsageRate);
        this.aTqzpUsageRate = Number(response.data.atqzpUsageRate);
        this.bTqzpUsageRate = Number(response.data.btqzpUsageRate);
      })
    }
  }
}
</script>
